<template>
	<div class="bear-SelectSearch">
		<div class="bear-main">
			<SelectPop class="bear-title my-ellipsis"
					   v-show="types"
					   v-slot="{option}"
					   :value="type"
					   :options="types||[]"
					   :name-attr="nameAttr"
					   :value-attr="valueAttr"
					   :simple="simpleType"
					   @input="$_bear_type_inputFn">{{option.name}}</SelectPop>
			<input type="text"
				   :value="search"
				   :class="{single:!types}"
				   :placeholder="placeholder"
				   @input="$_bear_search_inputFn"/>
			<van-icon name="search" @click="$_bear_clickFn"/>
		</div>
	</div>
</template>

<script>
	// eslint-disable-next-line no-unused-vars
	/* global utils */
	/**
	 * @author 唐国雄
	 * 带下拉框选择类型的搜索框
	 * 属性----------------------
	 * :name-attr	类型名称字段
	 * :value-attr	类型值字段
	 * :types		搜索类型,[{name:<String>,value:<*>},...]
	 * :simple-type	是否是简单型的types(types元素本身既是name也是value)
	 * :placeholder	输入提示
	 * 事件----------------------
	 * @search		点击搜索
	 *
	 * @typedef SelectSearch
	 * @event SelectSearch#search
	 * @type {Object} 搜索数据
	 * @property {String} search 搜索内容
	 * @property {*} type 搜索类型
	 */
	import SelectPop from './SelectPop';
	export default{
		name:'SelectSearch',
		components:{
			SelectPop
		},
		props:{
			// 类型名称字段
			nameAttr:{
				type:String,
				default:'name'
			},
			// 类型值字段
			valueAttr:{
				type:String,
				default:'value'
			},
			/**
			 * 搜索类型
			 * @typedef TypeItem
			 * @property {String} name 显示名称
			 * @property {*} value 实际值
			 */
			/**
			 * 所有支持的搜索类型
			 * @type {TypeItem[]}
			 */
			types:Array,
			// 是否是简单型的types
			simpleType:Boolean,
			placeholder:String,
			value:{
				type:Object,
				default(){
					return {};
				}
			}
		},
		data(){
			return {
				search:this.value.search,
				type:this.value.type
			};
		},
		watch:{
			value:{
				handler(val){
					this.search=val.search;
					this.type=val.type;
				},
				deep:true
			}
		},
		methods:{
			$_bear_clickFn(){
				this.$emit('search',{
					search:this.search,
					type:this.type
				});
			},
			$_bear_type_inputFn(e){
				this.type=e;
				this.$emit('input',{
					search:this.search,
					type:this.type
				});
			},
			$_bear_search_inputFn(e){
				this.search=e.target.value;
				this.$emit('input',{
					search:this.search,
					type:this.type
				});
			}
		}
	};
</script>

<style lang="scss">
	$input-height:30px;
	.bear-SelectSearch{
		width:100%;
		padding:6px 12px;
		background:#fff;
		>.bear-main{
			width:100%;
			height:$input-height;
			border-radius:17px;
			background:#eef2f7;
			display:flex;
			position:relative;
			>.bear-title{
				font-size:14px;
				line-height:$input-height;
				padding:0 25px 0 10px;
				max-width:50%;
				color:#000;
				position:relative;
				&:after{
					content:'';
					position:absolute;
					border-top: 5px solid;
					border-right: 4px solid transparent;
					border-left: 4px solid transparent;
					right: 8px;
					top: calc(50% - 3px);
				}
			}
			>input{
				border:0;
				outline:0;
				font-size:14px;
				color:#000;
				height:$input-height;
				line-height:$input-height;
				background:transparent;
				width:120px;
				flex-grow:1;
				&.single{
					margin-left:15px;
				}
			}
			>.van-icon{
				font-size:24px;
				color:#4d96f2;
				padding:0 8px;
				line-height:$input-height;
				flex-shrink:0;
			}
		}
	}
</style>
